<template>
  <div class="cart">
    <div class="container">
      <p class="title">我的购物车</p>
      <div class="cart-head">
        <div class="select">
          <input type="checkbox" v-model="checkAll" @click="checkAllMethod" />
        </div>
        <p class="img-seat">图片</p>
        <p class="good-name">商品名字</p>
        <p class="price">价格</p>
        <p class="num">数量</p>
        <p class="total">小计</p>
        <p class="del">操作</p>
      </div>
      <div class="cart-main">
        <div
          class="cart-single"
          v-for="(item, index) in cartArray"
          :key="item.id"
        >
          <div class="select">
            <input
              type="checkbox"
              v-model="item.checked"
              @click="checkSingle($event, item)"
            />
          </div>
          <div class="img-seat">
            <img :src="item.s_good.s_goods_photos[0].path" alt="" />
          </div>
          <p class="good-name">{{ item.s_good.name }}</p>
          <p class="price">{{ item.s_good.price }}</p>
          <p class="num">
            <el-input-number
              @change="updateNum(item.id, item.num)"
              class="numInput"
              v-model="item.num"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </p>
          <p class="total">￥{{ item.num * item.s_good.price }}</p>
          <div class="del">
            <button
              class="button"
              @click="delGood(item.id)"
              style="width: 80px"
            >
              删除
            </button>
          </div>
        </div>
      </div>
      <div class="cart-footer">
        <div class="footer-left">
          <div class="select">
            <input type="checkbox" v-model="checkAll" @click="checkAllMethod" />
          </div>
          <p class="totalnum">已选择{{ totalNum }}件</p>
          <button @click="delAll" class="fancy" style="width: 100px">
            删除
          </button>
          <button @click="clear" class="fancy clear" style="width: 200px">
            清空购物车
          </button>
        </div>
        <div class="footer-right">
          <p class="total">￥{{ total }}</p>
          <button class="fancy refer" @click="refer">提交订单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCart, delCart, UpdateCart } from "@/assets/request";
export default {
  name: "Cart",
  data() {
    return {
      cartArray: [],
      checkAll: false,
      checkedArray: [],
      // totalNum: 0,
    };
  },
  components: {},
  watch: {},
  methods: {
    // 删除商品
    async delGood(id) {
      const resDelGood = await delCart(
        {
          project_id: 259,
        },
        id
      );
      if (resDelGood.status == 200) {
        this.getCartArray();
      }
    },
    getTotalNum() {
      this.totalNum = this.checkedArray.reduce((prev, cur) => {
        return (prev += Number(cur.num));
      }, 0);
    },
    // 更新数量
    async updateNum(id, num) {
      const resUpdateCart = await UpdateCart(
        {
          project_id: 259,
          num: num,
        },
        id
      );
    },
    setCheckedArray() {
      this.checkedArray = this.cartArray.filter((item) => item.checked);
    },
    async getCartArray() {
      const resCart = await getCart();
      this.cartArray = resCart.data.result;
      this.setChecked();
      this.checkedArray.forEach((item) => {
        this.cartArray.forEach((el) => {
          el.id === item.id ? (el.checked = item.checked) : "";
        });
      });
    },
    setChecked() {
      this.cartArray.forEach((item) => {
        this.$set(item, "checked", false);
      });
    },
    checkSingle(e, el) {
      el.checked = e.target.checked;
      this.checkAll = this.cartArray.every((item) => item.checked);
      this.setCheckedArray();
    },
    checkAllMethod() {
      this.checkAll = !this.checkAll;
      this.cartArray.forEach((item) => {
        item.checked = this.checkAll;
      });
      this.setCheckedArray();
    },
    delAll() {
      this.cartArray
        .filter((item) => item.checked)
        .forEach((item) => this.delGood(item.id));
    },
    refer() {
      sessionStorage.setItem("checkedArray", JSON.stringify(this.checkedArray));
      this.$router.push({
        name: "orderconfirm",
        params: {
          checkedArray: this.checkedArray,
        },
      });
    },
    clear() {
      this.cartArray.forEach((item) => this.delGood(item.id));
      console.log(this.cartArray);
    },
  },
  computed: {
    total() {
      return this.cartArray
        .filter((item) => item.checked)
        .reduce((prev, cur) => {
          return (prev += cur.s_good.price * cur.num);
        }, 0);
    },
    totalNum() {
      return this.cartArray
        .filter((item) => item.checked)
        .reduce((prev, cur) => {
          return (prev += Number(cur.num));
        }, 0);
    },
  },
  mounted() {
    this.getCartArray();
    this.setCheckedArray();
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/style/cover2Btn.scss";
button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cart {
  width: 100%;
  height: 100%;
  padding-bottom: 50px;
  background-color: #f1f1f1;
  z-index: -10000;
  .container {
    width: 1200px;
    margin: 0 auto;
    .title {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 50px;
      font-size: 20px;
    }
    p,
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
    .cart-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 50px;
      border-bottom: 1px solid;
      background-color: #2f333a;
      color: white;
      p {
        text-align: center;
      }
    }
    .cart-main {
      display: flex;
      flex-direction: column;
      background-color: white;
      .cart-single {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1200px;
        height: 200px;
        border-bottom: 1px solid;
        p,
        div {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .img-seat {
      width: 200px;
      img {
        width: 170px;
        height: 170px;
      }
    }
    .good-name {
      width: 300px;
    }
    .select {
      display: flex;
      justify-content: center;
      width: 100px;
    }
    .price {
      width: 100px;
    }
    .num {
      width: 150px;
      input {
        width: 50px;
        height: 30px;
      }
    }
    .total {
      width: 100px;
    }
    .del {
      width: 100px;
      button {
        width: 50px;
        height: 30px;
      }
    }
    .cart-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 50px;
      background-color: #2f333a;
      color: white;
      .footer-left {
        display: flex;
        .totalnum {
          padding: 0 50px;
        }
        button {
          width: 50px;
          height: 30px;
        }
        .clear {
          margin-left: 20px;
        }
      }
      .footer-right {
        display: flex;
        button {
          width: 100px;
          height: 30px;
        }
        .total {
          padding: 0 20px;
          font-size: 20px;
          color: red;
        }
        .refer {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
